<template>
  <div class="main" style="min-height:100vh;width:7.5rem">
    <div v-show="plament == 'wechat' || plament == 'android'" class="back-wrapper whi flex-h">
      <div v-show="showBackArrow" class="backboxs" @click="goback">
        <i class="imgIcon backimgs"></i>
        <span class="back">返回</span>
      </div>
      <div class="flex1"></div>
      <div class="backboxs right" @click="openShare" v-show="plament == 'wechat'">
        <img class="imgIcon" src="~/static/images/shareBlack.png" alt />
      </div>
    </div>
    <div v-if="!stepShow">
      <scroller style="width:7.5rem;min-height:100vh;height:20rem">
        <div style="height:15rem;background:#fff">
          <div class="x-card-buy">
            <span class="title">{{sxTitle}}</span>
            <span class="name-hint">家长也可领取,姓名请填写某某家长</span>
            <!-- <span class="desc">填写信息领取升学卡</span> -->
            <div class="cardBuys">
              <div class="inputListBox">
                <div class="flex-h absBox">
                  <span class="flex-h flex1">
                    <img class="icon_quan" src="~@/static/images/icon_quan.png" alt />
                    <b>姓名</b>
                    <input v-on:blur="blurAdjust" placeholder="请输入" type="text" class="flex1" v-model="userName" />
                  </span>
                </div>
                <div class="absBox">
                  <div class="flex-h infoWrap">
                    <img class="icon_quan" src="~@/static/images/icon_quan.png" alt />
                    <b>性别</b>
                    <span class="pickertitle flex1">
                      <em>{{ sexes || '请选择' }}</em>
                    </span>
                    <img src="~@/static/images/com_icon_arrow_right_gray_32.png" class="imgIcon" alt />
                    <popup-picker :data="sexList" class="popiker" @on-change="changeSex"></popup-picker>
                  </div>
                </div>
                <div class="absBox">
                  <span class="flex-h infoWrap">
                    <img class="icon_quan" src="~@/static/images/icon_quan.png" alt />
                    <b>城市</b>
                    <span class="pickertitle flex1">
                      <em>{{ pickCitys || '请选择' }}</em>
                    </span>
                    <img src="~@/static/images/com_icon_arrow_right_gray_32.png" class="imgIcon" alt />
                    <div v-if="showMyPciker">
                      <popup-picker @on-change="changesCity" @on-hide="onHideCity" class="popiker" :data="list3" :columns="3" show-name></popup-picker>
                    </div>
                  </span>
                </div>
                <div class="absBox">
                  <span class="flex-h infoWrap">
                    <img class="icon_quan" src="~@/static/images/icon_quan.png" alt />
                    <b>学校</b>
                    <span class="pickertitle flex1" @click="clickSchool">
                      <em>{{ pickShoolName || '请选择' }}</em>
                    </span>
                    <img src="~@/static/images/com_icon_arrow_right_gray_32.png" class="imgIcon" alt />
                    <div v-if="showSchoolPciker">
                      <popup-picker @on-change="changes1" class="popiker" :data="list2" :columns="3" show-name></popup-picker>
                    </div>
                  </span>
                </div>
                <div class="absBox">
                  <span class="flex-h infoWrap">
                    <img class="icon_quan" src="~@/static/images/icon_quan.png" alt />
                    <b>年级</b>
                    <span class="pickertitle flex1">
                      <em>{{ gradesName || '请选择' }}</em>
                    </span>
                    <img src="~@/static/images/com_icon_arrow_right_gray_32.png" class="imgIcon" alt />
                    <popup-picker :data="list1" class="popiker" @on-change="changesGrade"></popup-picker>
                  </span>
                </div>
                <div class="absBox">
                  <span class="flex-h infoWrap">
                    <img class="icon_quan" src="~@/static/images/icon_quan.png" alt />
                    <b>班级</b>
                    <span class="pickertitle flex1">
                      <em>{{ classNames || '请选择' }}</em>
                    </span>
                    <img src="~@/static/images/com_icon_arrow_right_gray_32.png" class="imgIcon" alt />
                    <popup-picker :data="classNameList" class="popiker" @on-change="changes4"></popup-picker>
                  </span>
                </div>
                <div class="flex-h absBox" v-show="!isLogin">
                  <span class="flex-h flex1">
                    <img class="icon_quan" src="~@/static/images/icon_quan.png" alt />
                    <b>手机号</b>
                    <input v-on:blur="blurAdjust" placeholder="请输入" type="text" class="flex1" v-model="telNum" />
                  </span>
                </div>
                <div class="flex-h absBox" v-show="!isLogin">
                  <span class="flex-h flex1">
                    <img class="icon_quan" src="~@/static/images/icon_quan.png" alt />
                    <b>验证码</b>
                    <input v-on:blur="blurAdjust" placeholder="请输入" type="text" class="flex1" v-model="yzmNum" />
                  </span>
                  <span class="yzm" :style="showyzm ? 'color:#ffad0d' : 'color:#bbb'" @click="sendYzm">{{ yzmMsg }}</span>
                </div>
              </div>
            </div>
            <!-- <div class="sumbitBtn" @click="getCardPwd">获取卡号密码</div> -->
            <div style="padding:0.3rem;box-sizing:boder-box">
              <sumbit-btn :loading="loadings" message="领取" :isSumbit="showColor" @btnClick="getCardPwd"></sumbit-btn>
            </div>
            <div style="height:2rem;width:7.5rem;background:#fff"></div>
          </div>

          <div style="height:2rem;width:7.5rem;background:#fff"></div>
        </div>
      </scroller>
    </div>
    <div class="stepwoWrap" v-if="stepShow">
      <div style="height:1rem"></div>
      <div class="bgCard bg_card_shouce">
        <div class="imgtitle flex-h">
          <img src="~@/static/images/logo.png" alt />
          <b class="flex1">升学在线手册</b>
          <!-- <i>已激活</i> -->
        </div>
        <div class="infoBox cardsNum"></div>
        <div class="infoBox flex-h">
          <i>{{ manualArea }}</i>
          <b class="flex1">{{ gradesName }}</b>
          <strong @click="goPageUserManual">查看手册</strong><img src="~@/static/images/com_icon_arrow_right_white_32.png" alt="" />
        </div>
      </div>
      <div class="bgCard bg_sx_card">
        <div class="imgtitle flex-h">
          <img src="~@/static/images/logo.png" alt />
          <b class="flex1">升学卡</b>
          <!-- <i>已激活</i> -->
        </div>
        <div class="infoBox cardsNum">
          <i>卡号</i>
          <b>{{ sxCardNum }}</b>
        </div>
        <div class="infoBox flex-h">
          <i>密码</i>
          <b class="flex1">{{ sxCardPwd }}</b>
          <strong @click="commonJs.gopush('../home')">去使用</strong><img src="~@/static/images/com_icon_arrow_right_white_32.png" alt="" />
        </div>
      </div>

      <div class="save">手机截屏保存至系统相册</div>
      <div class="botwrapper">
        <div class="notice">
          <!-- <span>激活方式:</span> -->
          <!-- <p>关注升学在线公众号-个人中心-激活升学卡</p> -->
        </div>
        <!-- <div class="sumbitBtn" @click="commonJs.gopush('vipUserRoute/openVip')">去激活</div> -->
        <!-- <div class="subnotice">因流量过大，为保证直播课进行，升学卡九大功能暂未开放，开放后可常年使用，请领卡用户不要着急，功能将在近日开放，如有不便，敬请原谅！</div> -->
      </div>
    </div>
  </div>
</template>

<script>
import ls from 'store2'
import { PopupPicker, TransferDom } from 'vux'
import sumbitBtn from './login/components/sumbitBtn'
import { identityLogin, sendMessageCode, getUserInfoById } from '~/api/identity'
import { getAllCities, getSchools, captcha, getCardInfo, postCards, receive_info } from '~/api/flight'
import wxapi from '~/plugins/wxapi.js'
import { showShare } from '~/components/share/index'
import { backAppOrWx } from '~/common/common'

export default {
  components: {
    PopupPicker,
    sumbitBtn,
  },
  data() {
    return {
        sxTitle:'',
      manualArea: '',
      isLogin: false,
      loadings: false,
      showColor: true,
      showMyPciker: false,
      showSchoolPciker: false,
      plament: '',
      sxCardNum: '',
      sxCardPwd: '',
      telNum: '',
      yzmNum: '',
      yzmMsg: '获取验证码',
      userName: '',
      sexList: [['男', '女']],
      picksex: '请选择',
      sexes: '',
      pickCitys: '',
      pickShoolName: '',
      gradesName: '',
      showBackArrow: true,
      stepShow: false,
      showyzm: false,
      timer: null,
      nNum: 60,
      list2: [],
      list1: [['高一', '高二', '高三']],
      areaid: '',
      cityid: '',
      classNames: '',
      provinceid: '',
      schoolid: '',
      gradeid: '',
      pick: '请选择',
      list3: [],
      provice: [],
      citys: [],
      sendObj: {},
      classNameList: [[]],
    }
  },
  watch: {
    telNum(e) {
      const reg = /^1[3456789]\d{9}$/
      if (reg.test(e)) {
        this.showyzm = true
      } else {
        this.showyzm = false
      }
    },
  },
  mounted: function() {
    this.$route.query.type==='manual'? this.sxTitle = '领升学在线手册': this.sxTitle = '领升学卡'
    ls.get('userVoId') ? (this.isLogin = true) : (this.isLogin = false)
    this.$visit('getCard')
    wxapi.wxRegister()
    this.createClassNames()
    this.getAllCities()
    this.getUserInfo()
    this.wxShare()
    if (this.commonJs.GetUrlParam('shareArticle')) {
      this.showBackArrow = false
    }
    this.plament = this.checkTerminal()
  },
  methods: {
    goPageUserManual() {
      this.$vux.toast.text('同学你好 手册已预约成功 请在5.1服务节当天查看哦！')
    },
    getUserInfo() {
      if (this.isLogin && ls.get('userType') * 1 < 3) {
        this.getInfo()
      }
      if (this.isLogin) {
        this.$loading('open')
        this.yzmNum = '1' //默认值
        this.receiveInfo()
        this.getPrizeVipCard()
      }
    },
    getInfo() {
      let obj = {
        uid: ls.get('userVoId'),
      }
      getUserInfoById(obj)
        .then((res) => {
          if (res.code == 0) {
            this.pickCitys = res.data.area.replace(/,/g, '/')
            this.areaid = res.data.areaId
            this.gradesName = res.data.grade
            this.classNames = res.data.className
            this.pickShoolName = res.data.school
            this.gradesName === '高一' ? (this.gradesId = 1) : this.gradesName === '高二' ? (this.gradesId = 2) : (this.gradesId = 3)
            this.schoolid = res.data.schoolId
            this.manualArea = this.pickCitys.split('/')[0]
          }
        })
        .catch(() => {})
    },
    receiveInfo() {
      let obj = {
        uid: ls.get('userVoId'),
      }
      receive_info(obj)
        .then((res) => {
          if (res.code == 200) {
            if (res.data.manualInfo) {
              this.stepShow = true
            }
          }
        })
        .finally(() => {
          this.$hideLoading()
        })
    },
    checkTerminal() {
      var u = navigator.userAgent
      var chrome = u.match(/Chrome\/([\d.]+)/) || u.match(/CriOS\/([\d.]+)/)
      var isWechat = u.toLowerCase().match(/MicroMessenger/i) == 'micromessenger' || u.match(/_SQ_/i) == '_sq_'
      var isAndroid = u.match(/(Android);?[\s\/]+([\d.]+)?/)
      var isiOS = !chrome && u.match(/(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/)
      if (isWechat) {
        return 'wechat'
      } else if (isiOS) {
        return 'ios'
      } else if (isAndroid) {
        return 'android'
      }
    },
    goback() {
      backAppOrWx()
    },
    wxShare(pic, titles, descs, id) {
      let uri = window.location.href + '?shareArticle=' + true
      let option = {
        title: '升学在线',
        desc: '领取升学卡',
        link: uri,
        imgUrl: 'https://static.shengxue985.com/sxzx_app/logo/120x120.png',
      }
      wxapi.ShareAppMessage(option)
      wxapi.ShareTimeline(option)
    },
    getPrizeVipCard() {
      //   this.$loading('open')
      getCardInfo(ls.get('userVoId')).then((res) => {
        if (res.data) {
          this.sxCardNum = res.data[0].card_number
          this.sxCardPwd = res.data[0].card_password
          // this.stepShow = true
        }
      })
    },
    getCardPwd() {
      if (!this.userName) {
        this.$vux.toast.text('请输入姓名')
        return
      }
      if (!this.sexes) {
        this.$vux.toast.text('请选择性别')
        return
      }
      if (!this.pickCitys) {
        this.$vux.toast.text('请选择城市')
        return
      }
      if (!this.pickShoolName) {
        this.$vux.toast.text('请选择学校')
        return
      }
      if (!this.gradesName) {
        this.$vux.toast.text('请选择年级')
        return
      }
      if (!this.classNames) {
        this.$vux.toast.text('请选择班级')
        return
      }
      if (!this.isLogin) {
        if (this.telNum.length != 11) {
          this.$vux.toast.text('请输入正确手机号')
          return
        }
        if (!this.yzmNum) {
          this.$vux.toast.text('请输入验证码')
          return
        }
      }

      this.loadings = true
      let userVoid = ls.get('userVoId') ? (userVoid = ls.get('userVoId')) : (userVoid = '')
      let obj = {
        uid: userVoid,
        account: this.telNum,
        areaId: this.areaid,
        className: this.classNames,
        credentials: this.yzmNum,
        gradeId: this.gradesId,
        name: this.userName,
        schoolId: this.schoolid,
        sex: this.sexType,
      }
      postCards(obj)
        .then((res) => {
          if (res.code == '400') {
            this.$vux.toast.text(res.msg)
          }
          if (res.code == '200') {
            this.sxCardNum = res.data.cardNumber
            this.sxCardPwd = res.data.cardPassword
            ls.set('userVoId', res.data.uid)
            this.stepShow = true
            this.$vux.toast.text(res.msg)
            this.manualArea = this.pickCitys.split('/')[0]
          }
        })
        .finally(() => {
          this.loadings = false
        })
    },
    sendYzm() {
      if (this.nNum < 60) {
        this.$vux.toast.text('请稍后发送')
        return false
      }
      if (this.showyzm == false) {
        this.$vux.toast.text('请输入正确11位手机号码')
        return false
      }
      this.senyam()
      let obj = {
        telephone: this.telNum,
      }
      captcha(obj)
        .then((res) => {
          if (res.code == '40001') {
            this.sxCardNum = res.data.cardNumber
            this.sxCardPwd = res.data.cardPassword
            ls.set('userVoId', res.data.uid)
            this.stepShow = true
          }
          this.$vux.toast.text(res.msg)
        })
        .catch((error) => {
          this.$vux.toast.text(error)
        })
    },
    senyam() {
      this.showyzm = false
      this.timer = setInterval(() => {
        this.nNum -= 1
        this.yzmMsg = this.nNum + '秒'
        if (this.nNum <= 0) {
          clearInterval(this.timer)
          // yzm.className += ' send';
          this.yzmMsg = '发送验证码'
          this.showyzm = true
          this.nNum = 60
        }
      }, 1000)
    },
    openShare() {
      showShare('open')
    },
    handleCancel() {
      this.$emit('handleCloseCardDialog')
    },
    goNextRegister() {
      this.commonJs.gosto('register_data', this.$route.query.type)
      sessionStorage.setItem('regTeaFirstData', JSON.stringify(this.sendObj))
    },
    createClassNames() {
      let singleClassNameList = []
      for (let i = 1; i < 101; i++) {
        singleClassNameList.push(i + '班')
      }
      this.classNameList[0] = singleClassNameList
    },
    blurAdjust(e) {
      window.scroll(0, 0)
    },
    changeSex(e) {
      this.sexes = e[0]
      e[0] === '男' ? (this.sexType = 1) : e[0] === '女' ? (this.sexType = 2) : (this.sexType = 0)
    },
    onHideCity(type) {
      if (type == true) {
        this.list2 = []
        this.pickShoolName = ''
        this.schoolid = ''
        this.getAreaSchool()
      }
    },
    clickSchool() {
      if (!this.showSchoolPciker) {
        this.$vux.toast.text('请先选择所在城市')
      }
    },
    changesCity(e) {
      this.areaid = e[2] * 1
      this.list3.forEach((item) => {
        if (item.value == e[0] * 1) {
          this.proviceName = item.name
        }
        if (item.value == e[1] * 1) {
          this.cityName = item.name
        }
        if (item.value == e[2] * 1) {
          this.areaName = item.name
        }
      })
      this.pickCitys = this.proviceName + '/' + this.cityName + '/' + this.areaName
    },
    changes1(e) {
      this.schoolid = e[0] * 1
      this.list2.forEach((item) => {
        if (item.value == this.schoolid) {
          this.pickShoolName = item.name
        }
      })
      this.sendObj.schoolid = this.schoolid
    },
    changes2(e) {
      this.gradeid = e[0] * 1
      this.sendObj.gradeid = this.gradeid
    },
    changesGrade(e) {
      this.gradesName = e[0]
      e[0] === '高一' ? (this.gradesId = 1) : e[0] === '高二' ? (this.gradesId = 2) : (this.gradesId = 3)
    },
    changes4(e) {
      this.classNames = e[0]
    },

    onHide(type) {
      if (type == true) {
        this.list2 = []
        this.getAreaSchool()
      }
    },
    getAreaSchool() {
      getSchools(this.areaid).then((res) => {
        this.list2 = res.data
        this.$nextTick(() => {
          this.showSchoolPciker = true
        })
      })
    },
    getAllCities() {
      getAllCities()
        .then((res) => {
          this.list3 = res.data
          this.$nextTick(() => {
            this.showMyPciker = true
          })
        })
        .finally(() => {
          //   this.$hideLoading()
        })
    },
  },
}
</script>

<style lang="less" scoped>
.back-wrapper {
  width: 7.5rem;
  height: 0.8rem;
  line-height: 0.8rem;
  padding: 0 0.3rem;
  box-sizing: border-box;
  position: relative;
  z-index: 10;
  background: #fff;
  .backboxs {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 1.2rem;
    height: 0.8rem;
    padding: 0.2rem 0;
  }
  .imgIcon {
    width: 0.4rem;
    height: 0.4rem;
  }
  .backimgs {
    display: inline-block;
    background: url('~@/static/sprite/icon_sprites_40.png') -0.1rem -0.1rem;
    background-size: 3rem 2.4rem;
  }
  .back {
    display: inline-block;
    margin-left: 0.1rem;
    font-weight: bold;
    color: #222;
  }
  .right {
    text-align: right;
    .imgIcon {
      margin-left: 0.8rem;
    }
  }
}
.x-card-buy {
  position: fixed;
  width: 7.5rem;
  height: auto;
  min-height: 100vh;
  left: 0;
  top: 0;
  background: #fff;
  z-index: 4;
  .title {
    display: block;
    font-size: 0.4rem;
    text-align: center;
    margin-top: 1.1rem;
    font-weight: 600;
    color: rgba(34, 34, 34, 1);
  }
  .desc {
    font-size: 0.3rem;
    display: block;
    text-align: center;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    margin-bottom: 0.5rem;
  }
  .cardBuys {
    width: 6.9rem;
    height: 9rem;
    overflow: hidden;
    background: #fff;
    overflow: hidden;
    padding: 0.3rem;
    box-sizing: border-box;
    margin: 1rem auto;
    box-shadow: 0px 0px 0.2rem 0px rgba(204, 204, 204, 0.3);
    border-radius: 0.2rem;
  }
}

.inputListBox {
  width: 100%;
  height: auto;
  overflow: hidden;
  box-sizing: border-box;
  margin-bottom: 1.2rem;
  position: relative;
  .closes {
    width: 0.4rem;
    height: 0.4rem;
    position: absolute;
    right: 0rem;
    top: 0.3rem;
  }

  .absBox {
    width: 100%;
    height: 1rem;
    .icon_quan {
      width: 0.3rem;
      height: 0.3rem;
      margin-right: 0.1rem;
    }
    .imgIcon {
      width: 0.32rem;
      height: 0.32rem;
    }
    i {
      font-size: 0.3rem;
      color: #ef4a4d;
      padding-right: 0.1rem;
    }
    .pos {
      position: relative;
    }
    .infoWrap {
      position: relative;
      height: 1rem;
      .icon_quan {
        width: 0.3rem;
        height: 0.3rem;
        margin-right: 0.1rem;
      }
      b {
        color: #222222;
        font-size: 0.3rem;
        font-weight: bold;
        letter-spacing: 0.05rem;
      }
      .pickertitle {
        font-size: 0.3rem;
        text-align: right;
        color: #222;
        padding-right: 0.1rem;
        box-sizing: border-box;
        em {
          display: block;
          width: 100%;
          height: 100%;
          text-align: right;
        }
      }
      .imgIcon {
        width: 0.32rem;
        height: 0.32rem;
      }
      .popiker {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        width: 100%;
        height: 1rem;
        /deep/.weui-cell {
          height: 0.9rem;
        }
      }
    }
    .in1 {
      font-weight: bold;
    }
    span {
      display: flex;
      img {
        width: 0.4rem;
        height: 0.4rem;
      }
      input,
      .popiker {
        flex: 1;
        height: 0.8rem;
        line-height: 0.8rem;
        font-size: 0.3rem;
        outline: none;
        border: none;
        width: 100%;
        padding-left: 0.3rem;
        background: rgba(0, 0, 0, 0);
        text-align: right;
        color: #bbb;
        .weui-cell {
          height: 0.9rem;
        }
      }
      .popiker /deep/ .weui-cell {
        padding-left: 0;
        padding-top: 0;
      }
      .popiker /deep/ .vux-popup-picker-value,
      input {
        color: #222;
      }
      .popiker /deep/ .vux-popup-picker-select {
        text-align: left !important;
      }

      .popiker /deep/ .weui-cell__ft::after {
        display: none;
      }
      .vux-cell-box:not(:first-child):before {
        border-top: none;
      }
      b {
        color: #222222;
        font-size: 0.3rem;
        font-weight: bold;
        letter-spacing: 0.05rem;
      }
    }
    .yzm {
      color: #ffad0d;
      margin-left: 0.1rem;
    }
  }
}
.sumbitBtn {
  width: 6.2rem;
  height: 0.88rem;
  background: rgba(255, 173, 13, 1);
  border-radius: 0.5rem;
  text-align: center;
  line-height: 0.88rem;
  font-size: 0.3rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 1);
  margin: 1rem auto 0;
}
.stepwoWrap {
  width: 100%;
  height: 100vh;
  background: #fff;
  box-sizing: border-box;
  .bgCard {
    width: 7.5rem;
    height: 3.5rem;
    overflow: hidden;
    .imgtitle {
      width: 100%;
      padding: 0 0.6rem;
      box-sizing: border-box;
      margin-top: 0.3rem;
      img {
        width: 0.87rem;
        height: 0.64rem;
        vertical-align: middle;
      }
      b {
        font-size: 0.44rem;
        font-weight: 600;
        color: rgba(255, 255, 255, 1);
        vertical-align: middle;
        padding-left: 0.2rem;
        box-sizing: border-box;
      }
      i {
        width: 1.42rem;
        height: 0.6rem;
        background: rgba(223, 164, 94, 1);
        border-radius: 0.3rem;
        text-align: center;
        line-height: 0.6rem;
        font-size: 0.26rem;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        // opacity: 0.18;
        // display: inline-block;
      }
    }
  }
  .bg_sx_card {
    background: url('~@/static/images/bg_card_shengxu.png') no-repeat;
    background-size: 100% 100%;
  }
  .bg_card_shouce {
    background: url('~@/static/images/bg_card_shouce.png') no-repeat;
    background-size: 100% 100%;
  }
  .infoBox {
    width: 100%;
    height: 0.6rem;
    border-radius: 0.12rem;
    padding: 0 0.6rem;
    box-sizing: border-box;
    i {
      font-size: 0.3rem;
      font-weight: 500;
      color: #fff;
      line-height: 0.6rem;
      margin-left: 0.2rem;
    }
    b {
      font-size: 0.3rem;
      font-weight: 500;
      color: #fff;
      line-height: 0.6rem;
      margin-left: 0.4rem;
    }
    strong {
      font-size: 0.26rem;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
    }
    img {
      width: 0.4rem;
      height: 0.4rem;
    }
  }
  .cardsNum {
    margin-top: 0.3rem;
  }
  .save {
    font-size: 0.3rem;
    font-weight: 600;
    color: rgba(255, 173, 13, 1);
    text-align: center;
    padding: 0.2rem 0;
    opacity: 0;
    // border-bottom: 1px solid #f7f7fa;
  }
  .botwrapper {
    padding: 0 0.3rem;
    box-sizing: border-box;
  }
  .notice {
    padding-top: 0.3rem;
    // border-top: 1px solid #e5e8ed;
    span {
      display: block;
    }
    span,
    p {
      font-size: 0.28rem;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(34, 34, 34, 1);
    }
  }
  .subnotice {
    text-align: left;
    font-size: 0.24rem;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    margin-top: 0.15rem;
  }
}

.name-hint {
  font-size: 0.25rem;
  text-align: center;
  color: gray;
  display: block;
}
</style>
